<%@ page import="java.net.URLEncoder"%>
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <title>地图显示</title>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }
        .amap-icon img,
        .amap-marker-content img{
            width: 25px;
            height: 34px;
        }
    </style>
</head>
<body>

<div id="test" style="margin-top:5px;">
	<div style="float:left;"><span style="font-size:18px;"><b>车辆名称：</b></span></div>
	<select style="width:450px;height:30px;overflow:scroll;" id="car_select" onchange='getSelectValue(this[selectedIndex].value);'></select>
</div>

<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=1adc13484c61e9e0320b086e5e2744f6"></script>
 <!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script>	
	var basePath;
	$(function() {
		var location = (window.location + '').split('/');
		basePath = location[0] + '//' + location[2] + '/' + location[3];
		map = new AMap.Map('container', {
	    	resizeEnable: true, //是否监控地图容器尺寸变化
			zoom:10, //初始化地图层级
			center: [113.74848517125868, 25.07404008029031] //初始化地图中心点
	    });
		getCarNames();
		getDoorStation();
	});
	
	
	function getSelectValue(obj) {
		var carName = obj
		var paths = []
		$.ajax({
			url : basePath + "/getTrainInfo.do?carName=" + carName,
			data : {},
			async:false,
			type : 'get',
			success : function(result) {
				for(var j = 0; j < result.length; j++) {
					var temp = new Array();
					temp.push(result[j].longitude)
					temp.push(result[j].latitude)
					paths.push(temp);
				}
			}
		});
		
		if (paths.length < 1)
		{
			//重新回到北京原始点
			paths = [[113.060238, 25.203143]]
		}
		
		AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

	        if (!PathSimplifier.supportCanvas) {
	            alert('当前环境不支持 Canvas！');
	            return;
	        }
			
	        var defaultRenderOptions = {
                renderAllPointsIfNumberBelow: -1,
                pathTolerance: 2,
                keyPointTolerance: 0,
                pathLineStyle: {
                    lineWidth: 5,
                    strokeStyle: '#f75938',
                    borderWidth: 5,
                    borderStyle: '#eeeeee',
                    dirArrowStyle: false
                },
                pathLineHoverStyle: {
                    lineWidth: 3,
                    strokeStyle: 'rgba(204, 63, 88,1)',
                    borderWidth: 5,
                    borderStyle: '#cccccc',
                    dirArrowStyle: false
                },
                pathLineSelectedStyle: {
                    lineWidth: 3,
                    strokeStyle: '#C11534',
                    borderWidth: 5,
                    borderStyle: '#cccccc',
                    dirArrowStyle: true
                },
                dirArrowStyle: {
                    stepSpace: 35,
                    strokeStyle: '#ffffff',
                    lineWidth: 2
                },
                startPointStyle: {
                    radius: 4,
                    fillStyle: '#109618',
                    lineWidth: 2,
                    strokeStyle: '#eeeeee'
                },
                endPointStyle: {
                    radius: 4,
                    fillStyle: '#dc3912',
                    lineWidth: 2,
                    strokeStyle: '#eeeeee'
                },
                keyPointStyle: {
                    radius: 3,
                    fillStyle: 'rgba(8, 126, 196, 1)',
                    lineWidth: 2,
                    strokeStyle: '#eeeeee'
                },
                keyPointHoverStyle: {
                    radius: 4,
                    fillStyle: 'rgba(0, 0, 0, 0)',
                    lineWidth: 2,
                    strokeStyle: '#ffa500'
                },
                keyPointOnSelectedPathLineStyle: {
                    radius: 4,
                    fillStyle: 'rgba(8, 126, 196, 1)',
                    lineWidth: 2,
                    strokeStyle: '#eeeeee'
                }
            };
	        
	        var pathSimplifierIns = new PathSimplifier({
	            zIndex: 100,
	            //autoSetFitView:false,
	            map: map, //所属的地图实例

	            getPath: function(pathData, pathIndex) {

	                return pathData.path;
	            },
	            getHoverTitle: function(pathData, pathIndex, pointIndex) {

	                if (pointIndex >= 0) {
	                    //point 
	                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
	                }

	                return pathData.name + '，点数量' + pathData.path.length;
	            },
	            renderOptions: defaultRenderOptions
	        });

	        window.pathSimplifierIns = pathSimplifierIns;

	        //设置数据
	        pathSimplifierIns.setData([{
	            name: '路线',
	            path: paths
	        }]);
	    }); 
		
	};
	
	function getCarNames() {
		$.ajax({
			url : basePath + "/getTrainName.do",
			data : {},
			async:false,
			type : 'get',
			success : function(result) {
				var select = document.getElementById("car_select");
				select.options.add(new Option("", ""))
				for(var j = 0; j < result.length; j++) {
					select.options.add(new Option(result[j], result[j]));  
				}
			}
		});
	};   
	
	function getDoorStation() {
		
		
		AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
			
			$.ajax({
				url: basePath + "/getDoorStations.do",
				data: {},
				async:false,
				type: 'get',
				success: function(result) {
					for(var j = 0; j < result.length; j++) {
						var pos = new Array();
						pos.push(result[j].longitude)
						pos.push(result[j].latitude)
						if (result[j].flag == 0) {
							new SimpleMarker({
					            iconLabel: '收费站',
					            //自定义图标地址
					            iconStyle: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png',
					            //设置基点偏移
					            offset: new AMap.Pixel(-19, -60),
					            map: map,
					            showPositionPoint: true,
					            position: pos,
					            zIndex: 100
					        });
						} else {
							new SimpleMarker({
					            iconLabel: '门架',
					            //直接设置html(需要以"<"开头并且以">"结尾)
					            iconStyle: '<div style="background:#DDA0DD;width:20px;height:60px;"></div>',
					            //设置基点偏移
					            offset: new AMap.Pixel(-10, -60),
					            map: map,
					            showPositionPoint: true,
					            position: pos
					        });	
						}
					} 
				}
			});
			
	        
	    });
		
	};
	
	function init() {
		/* getCarNames(); */
		
		//创建地图
	    /* var map = new AMap.Map('container', {
	    	resizeEnable: true, //是否监控地图容器尺寸变化
			zoom:4, //初始化地图层级
			center: [116.397428, 39.90923] //初始化北京为地图中心点
	    }); */

	    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

	        if (!PathSimplifier.supportCanvas) {
	            alert('当前环境不支持 Canvas！');
	            return;
	        }
			
	        var defaultRenderOptions = {
                renderAllPointsIfNumberBelow: -1,
                pathTolerance: 2,
                keyPointTolerance: 0,
                pathLineStyle: {
                    lineWidth: 5,
                    strokeStyle: '#f75938',
                    borderWidth: 5,
                    borderStyle: '#eeeeee',
                    dirArrowStyle: false
                },
                pathLineHoverStyle: {
                    lineWidth: 3,
                    strokeStyle: 'rgba(204, 63, 88,1)',
                    borderWidth: 5,
                    borderStyle: '#cccccc',
                    dirArrowStyle: false
                },
                pathLineSelectedStyle: {
                    lineWidth: 3,
                    strokeStyle: '#C11534',
                    borderWidth: 5,
                    borderStyle: '#cccccc',
                    dirArrowStyle: true
                },
                dirArrowStyle: {
                    stepSpace: 35,
                    strokeStyle: '#ffffff',
                    lineWidth: 2
                },
                startPointStyle: {
                    radius: 4,
                    fillStyle: '#109618',
                    lineWidth: 2,
                    strokeStyle: '#eeeeee'
                },
                endPointStyle: {
                    radius: 4,
                    fillStyle: '#dc3912',
                    lineWidth: 2,
                    strokeStyle: '#eeeeee'
                },
                keyPointStyle: {
                    radius: 3,
                    fillStyle: 'rgba(8, 126, 196, 1)',
                    lineWidth: 2,
                    strokeStyle: '#eeeeee'
                },
                keyPointHoverStyle: {
                    radius: 4,
                    fillStyle: 'rgba(0, 0, 0, 0)',
                    lineWidth: 2,
                    strokeStyle: '#ffa500'
                },
                keyPointOnSelectedPathLineStyle: {
                    radius: 4,
                    fillStyle: 'rgba(8, 126, 196, 1)',
                    lineWidth: 2,
                    strokeStyle: '#eeeeee'
                }
            };
	        
	        var pathSimplifierIns = new PathSimplifier({
	            zIndex: 100,
	            //autoSetFitView:false,
	            map: map, //所属的地图实例

	            getPath: function(pathData, pathIndex) {

	                return pathData.path;
	            },
	            getHoverTitle: function(pathData, pathIndex, pointIndex) {

	                if (pointIndex >= 0) {
	                    //point 
	                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
	                }

	                return pathData.name + '，点数量' + pathData.path.length;
	            },
	            renderOptions: defaultRenderOptions
	        });

	        window.pathSimplifierIns = pathSimplifierIns;

	        //设置数据
	        pathSimplifierIns.setData([{
	            name: '路线1',
	            path: 
	            [
					[113.131935,25.2170050000],
					[113.131936,25.2170050000],
					[113.134523,25.2123010000],
					[113.134524,25.2123030000],
					[113.135828,25.2105610000],
					[113.135829,25.2105630000],
					[113.15465,25.2010350000],
					[113.154651,25.2010350000],
					[113.160661,25.2005650000],
					[113.160663,25.2005660000],
					[113.163761,25.2003480000],
					[113.163763,25.2003490000],
					[113.177128,25.1987560000],
					[113.177129,25.1987570000],
					[113.18233,25.1971860000],
					[113.182331,25.1971880000],
					[113.186832,25.1956620000],
					[113.186831,25.1956610000],
					[113.1952,25.1937060000],
					[113.1952,25.1937070000],
					[113.256667,25.1675050000],
					[113.279044,25.1409520000],
					[113.283196,25.1371730000],
					[113.304242,25.1229180000],
					[113.308989,25.1180460000],
					[113.311884,25.1127360000],
					[113.312283,25.1114300000],
					[113.312284,25.1114310000],
					[113.312425,25.1108810000],
					[113.312425,25.1108820000],
					[113.3131,25.1072460000],
					[113.313101,25.1072480000],
					[113.314368,25.1023010000],
					[113.314369,25.1023030000],
					[113.316426,25.0976660000],
					[113.316428,25.0976670000],
					[113.317993,25.0950700000],
					[113.317994,25.0950700000],
					[113.319519,25.0927900000],
					[113.319518,25.0927900000],
					[113.320246,25.0916430000],
					[113.320247,25.0916440000],
					[113.321916,25.0881860000],
					[113.321917,25.0881870000],
					[113.323105,25.0833710000],
					[113.323105,25.0833730000],
					[113.3231,25.0781600000],
					[113.323101,25.0781600000],
					[113.322826,25.0727700000],
					[113.322827,25.0727710000],
					[113.323593,25.0674400000],
					[113.323594,25.0674410000],
					[113.325266,25.0623050000],
					[113.325267,25.0623060000],
					[113.327688,25.0574780000],
					[113.327689,25.0574790000],
					[113.329246,25.0550880000],
					[113.329248,25.0550890000],
					[113.331082,25.0526950000],
					[113.331081,25.0526950000],
					[113.334226,25.0493480000],
					[113.334227,25.0493490000],
					[113.33495,25.0486810000],
					[113.33495,25.0486820000],
					[113.335243,25.0484200000],
					[113.335244,25.0484210000],
					[113.339703,25.0449960000],
					[113.339704,25.0449980000],
					[113.339873,25.0448860000],
					[113.339874,25.0448880000],
					[113.343351,25.0428210000],
					[113.343352,25.0428220000],
					[113.34443,25.0422700000],
					[113.344431,25.0422700000],
					[113.345168,25.0419110000],
					[113.345169,25.0419130000],
					[113.351045,25.0396400000],
					[113.351046,25.0396410000],
					[113.352428,25.0392400000],
					[113.352429,25.0392410000],
					[113.356773,25.0382900000],
					[113.356774,25.0382910000],
					[113.36253,25.0374010000],
					[113.36253,25.0374030000],
					[113.368288,25.0356540000],
					[113.368286,25.0356530000],
					[113.370636,25.0345250000],
					[113.370637,25.0345260000],
					[113.37168,25.0339330000],
					[113.37168,25.0339340000],
					[113.37342,25.0327930000],
					[113.37342,25.0327940000],
					[113.377715,25.0289500000],
					[113.380885,25.0244360000],
					[113.380885,25.0244380000],
					[113.382893,25.0194210000],
					[113.382894,25.0194230000],
					[113.384285,25.0141730000]       
	            ]
	        }]);
	    }); 
		
	}
</script>
<body style="height:100%">
</body>
</html>